<template>
	<view>
		<view :class="layerHidden ? 'layer-hidden' : ''" class="container">
			<view class="searchBox">
				<!-- #ifdef MP-WEIXIN -->

				<view>
					<view class="titleBar1">
						<u-search class="search1" bg-color="#F7F8FA" placeholder="请输入岗位名称或企业" v-model="keyword"
							:show-action="false" @change="search">
						</u-search>
					</view>
				</view>

				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="titleBar">
					<u-search class="search" bg-color="#F7F8FA" placeholder="请输入岗位名称或企业" v-model="keyword"
						:show-action="false" @change="search">
					</u-search>
				</view>
				<!-- #endif -->
				<view class="u-m-p-50">
					<view class="u-demo-area u-flex u-row-center">

						<div class="addrBox">
							<pickerAddress class="addr" ref="addr" @fnpickerAddress="fnpickerAddress">
							</pickerAddress>
							<u-icon color="rgb(192, 196, 204)" class="icons" name="arrow-down"></u-icon>
						</div>
					
						<u-dropdown @close="handleClose" @open="handleOpen" :close-on-click-mask="mask" ref="uDropdown"
							:activeColor="activeColor" :borderBottom="borderBottom">
							<u-dropdown-item></u-dropdown-item>

							<!-- <u-dropdown-item :title="wortypetitle">
								<div class="workType">
									<workType @closeDropdown="closeDropdown" />
								</div>
							</u-dropdown-item> -->
							<u-dropdown-item @change="changeRecomand" v-model="orderSort" :title="recomandTitle"
								:options="options1">
							</u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
			</view>


			<!-- #ifdef MP-WEIXIN -->
			<view :style="{ 'margin-top': 92 + 'px' }" class="list">
				<myitem v-if="list.length" :list="list" />
				<u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
			</view>

			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view :style="{ 'margin-top': '90px' }" class="list">
				<myitem v-if="list.length" :list="list" />
				<u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
			</view>

			<!-- #endif -->
			<u-loadmore v-if="list.length != 0" :status="status" @loadmore="loadmore"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import pickerAddress from "@/components/citys/pickerAddress.vue";
	import myitem from "@/components/list/index.vue";
	import workType from "@/components/workType.vue";
	import api from '../../../../api/routes.js'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		components: {
			pickerAddress,
			myitem,
			workType,
		},
		computed: {
			...mapGetters(['citiesInfor']),
		},
		data() {
			return {
				layerHidden: false,
				// titList: ["小时工", "学生专区", "工厂直招", "本地工作"],

				// classifyList: ["hours", "stu", "factory", "local"],
				cityArr: [],
				orderSort: undefined,
				city: "地区",
				page: 1,
				limit: 5,
				status: "loadmore",
				list: [],
				// 拿到的数据总条数
				total: 0,
				//判断是否发送请求的条件
				load: false,
				workType: '',
				wortypetitle: '工种',

				keyword: "",
				// classify: "",
				addr: true,
				mask: true,
				recomandTitle: "智能推荐",
				options1: [
					{
						label: "不限",
						value: 0,
					},{
						label: "最新发布",
						value: 1,
					},
					{
						label: "智能推荐",
						value: 2,
					},
					{
						label: "工资最高",
						value: 3,
					},
					{
						label: "热门推荐",
						value: 4,
					},
				],

				borderBottom: false,
				activeColor: "#2979ff",
			};
		},

		onLoad(e) {
			// this.classify = this.classifyList[e.id];
			// uni.setNavigationBarTitle({
			// 	title: this.titList[e.id],
			// });
			this.getList();
		},
		//下拉
		// 页面到底部的生命周期，每次页面抵达底部都会触发
		onReachBottom() {
			//页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
			if (this.status === "loadmore") {
				this.loadmore();
			}
		},

		methods: {
			fnpickerAddress(val) {
				
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 50,
				});
				this.list = [];
				this.page = 1;
				val.status ? uni.hideTabBar() : uni.showTabBar();
				this.layerHidden = val.status;
				if(val.loadDate){
					this.getList();
				}
			},
			async getList() {
				// 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
				if (this.load) {
					return;
				}
				this.load = true;
				// 请求数据时，状态改为加载中状态
				this.status = "loading";
				const res = await this.$myRequest({
					url: api.pageJobList,
					method: "POST",
					data: {
						page: this.page,
						limit: this.limit,
						key: this.keyword, //搜索关键词
						// classify: this.classify, //分类(hours:小时工,stu:学生专区,factory:工厂,local:本地工作,build:建筑招工,fitup:装修energy:能源,other:其他)
						type: "1", //1:找工作模块 2:工地招工
						orderSort: this.orderSort, //1:热门,2:最新,3:推荐，热门
						province: this.citiesInfor[0], //省
						city: this.citiesInfor[1], //市
						district: this.citiesInfor[2], //区
						workType: this.workType, //工种ID
					},
				});
				console.log(res,"拿上传图片00");
				// 请求完以后，将load改为false，方便下一次发送请求
				this.load = false;
				// 判断获取的数据是否正确，当res.code=0时，数据正确
				if (res.data.code !== 0) {
					// 当获取到的数据不正确时，给用户错误提示信息
					return uni.showToast({
						title: res.msg,
						icon: "none",
					});
					//并将状态码改为nomore，没有更多了
					this.status = "nomore";
				}

				// 如果从接口中获取到的数据是正确的，获取到数据的总条数
				this.total = res.data.page.totalCount;
				// 将获取到的数据给数据列表，此处是解构，不适合用push
				this.list = [...this.list, ...res.data.page.list];
				console.log(this.list,"本地招聘传值");
				// 调用ismore方法 ，判断时候还有数据
				this.ismore();
			},
			// 判断是否还有更多数据
			ismore() {
				// 判断当数据总数等于数据列表的长度时，此时已经获取到全部数据，没有更多了，将加载状态改为nomore
				if (this.total === this.list.length) {
					this.status = "nomore";
					// 否则，将状态改为loadmore，仍然还有数据
				} else {
					this.status = "loadmore";
				}
			},
			// 加载下一页的数据
			loadmore() {
				// 每次出发该方法，都要使页数加一
				this.page++;
				// 页数加一后，在调用getList方法，获取下一页的数据
				this.getList();
			},
			handleOpen() {
				this.layerHidden = true;
			},
			handleClose() {
				this.layerHidden = false;
			},

			search(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 50,
				});
				this.list = [];
				this.page = 1;
				this.getList();
			},
			
			changeRecomand(index) {
				this.recomandTitle = this.options1[index - 1].label;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 50,
				});
				this.list = [];
				this.page = 1;
				this.getList();
			},

			closeDropdown(val) {
				console.log(val);
				this.$refs.uDropdown.close();
				this.layerHidden = false;
				let sendIds = '';
				if (val && val.length) {
					let ids = val.map((i) => i.id);
					sendIds = ids && ids.length ? ids.join(",") : "";
					this.wortypetitle = val.length ? `工种${val.length}个` : "工种"
				} else {
					this.wortypetitle = "工种"
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 50,
				});
				this.list = [];
				this.page = 1;
				this.workType = sendIds;
				this.getList();
			},

		},
	};
</script>
<style>
	page {
		background: #efefef;
	}
</style>
<style scoped lang="scss">
	.workType {
		height: calc(100vh - 80px);
	}

	.layer-hidden {
		height: 90vh;
		overflow: hidden;
	}

	.empty {
		display: block;
		text-align: center;
		margin: 0 auto;
		padding: 150px 0 0 0;
	}

	.btnbox {
		display: flex;

		button {
			flex: 1;

			&.clear {
				margin-right: 20px;
			}
		}
	}

	.searchBox {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: #ffffff;
		padding-top: 20rpx;
		z-index: 4;

		.titleBar1 {
			width: 95%;
			margin: 10px auto 0 auto;
		}

		.titleBar {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.search {
			height: 100%;
			width: 94%;
			padding: 0 3%;
			background: #ffffff;
		}
	}

	.u-m-p-50 {
		height: 40px;
	}

	.u-row-center {
		position: relative;
		z-index: 2;
		background: #ffffff;

		.addrBox {
			position: absolute;
			left: 0;
			width: 50%;
			height: 80rpx;
			// line-height: 80rpx;
			z-index: 999;
			background: #ffffff;
			text-align: center;
			color: rgb(96, 98, 102);
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;

			.addr {
				width: 120upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				word-break: break-all;
			}

			.icons {
				width: 20upx;
				margin-left: 4px;
			}
		}

		// .addr {
		//   position: absolute;
		//   left: 0;
		//   width: 25%;
		//   height: 80rpx;
		//   line-height: 80rpx;
		//   z-index: 999;
		//   background: #ffffff;
		//   text-align: center;
		//   color: rgb(96, 98, 102);
		//   font-size: 14px;

		//   .icons {
		//     margin-left: 4px;
		//   }
		// }
	}

	.u-config-wrap {
		padding: 40rpx;
	}

	.slot-content {
		background-color: #ffffff;
		padding: 24rpx;

		.item-box {
			padding-bottom: 20px;
			height: calc(100vh - 180px);
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #ffffff;
				background-color: $u-type-primary;
			}
		}
	}
</style>
